/*
 * @Author: wangmyng wangmyng@163.com
 * @Date: 2025-11-04 21:58:42
 * @LastEditors: wangmyng wangmyng@163.com
 * @LastEditTime: 2025-11-04 21:58:57
 */
// SegmentDigit.tsx
import React from 'react';

interface SegmentDigitProps {
  value: number; // 0-9
  color?: string;
  size?: number;
}
/**
 * 电子样式单个数字
 */
const SegmentDigit: React.FC<SegmentDigitProps> = ({ 
  value, 
  color = '#ff4d4f',
  size = 1 
}) => {
  // 数字0-9的段映射（A-G段）
  const digitMap: { [key: number]: string } = {
    0: 'ABCDEF',
    1: 'BC',
    2: 'ABGED',
    3: 'ABGCD',
    4: 'FGBC',
    5: 'AFGCD',
    6: 'AFGECD',
    7: 'ABC',
    8: 'ABCDEFG',
    9: 'ABCDFG'
  };

  const activeSegments = digitMap[value] || '';

  return (
    <svg width={12 * size} height={36 * size} viewBox="0 0 30 50">
      {/* A段 - 上横 */}
      <rect x="5" y="0" width="20" height="4" rx="1" 
            fill={activeSegments.includes('A') ? color : '#1a3353'} 
            opacity={activeSegments.includes('A') ? 1 : 0.3}/>
      
      {/* B段 - 上右竖 */}
      <rect x="26" y="4" width="4" height="20" rx="1" 
            fill={activeSegments.includes('B') ? color : '#1a3353'} 
            opacity={activeSegments.includes('B') ? 1 : 0.3}/>
      
      {/* C段 - 下右竖 */}
      <rect x="26" y="26" width="4" height="20" rx="1" 
            fill={activeSegments.includes('C') ? color : '#1a3353'} 
            opacity={activeSegments.includes('C') ? 1 : 0.3}/>
      
      {/* D段 - 下横 */}
      <rect x="5" y="46" width="20" height="4" rx="1" 
            fill={activeSegments.includes('D') ? color : '#1a3353'} 
            opacity={activeSegments.includes('D') ? 1 : 0.3}/>
      
      {/* E段 - 下左竖 */}
      <rect x="0" y="26" width="4" height="20" rx="1" 
            fill={activeSegments.includes('E') ? color : '#1a3353'} 
            opacity={activeSegments.includes('E') ? 1 : 0.3}/>
      
      {/* F段 - 上左竖 */}
      <rect x="0" y="4" width="4" height="20" rx="1" 
            fill={activeSegments.includes('F') ? color : '#1a3353'} 
            opacity={activeSegments.includes('F') ? 1 : 0.3}/>
      
      {/* G段 - 中横 */}
      <rect x="5" y="23" width="20" height="4" rx="1" 
            fill={activeSegments.includes('G') ? color : '#1a3353'} 
            opacity={activeSegments.includes('G') ? 1 : 0.3}/>
    </svg>
  );
};
export default SegmentDigit;
